<template>
    <a-modal :visible="localVisible" :title="title" @ok="handleOk" @cancel="handleCancel">
        <a-input v-model="name" placeholder="请输入分组名称" />
    </a-modal>
</template>

<script>
export default {
    name: 'GroupModal',
    props: {
        visible: {
            type: Boolean,
            required: true
        },
        title: {
            type: String,
            required: true
        },
        initialName: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            name: this.initialName
        }
    },
    computed: {
        localVisible: {
            get() {
                return this.visible
            },
            set(value) {
                this.$emit('update:visible', value)
            }
        }
    },
    watch: {
        visible(val) {
            if (val) {
                this.name = this.initialName
            }
        },
        initialName(val) {
            this.name = val
        }
    },
    methods: {
        handleOk() {
            if (!this.name) {
                this.$message.error('名称不能为空')
                return
            }
            this.$emit('ok', this.name)
        },
        handleCancel() {
            this.$emit('cancel')
        }
    }
}
</script> 